<!DOCTYPE html>
<%@page pageEncoding="UTF-8"%>
<html>
<!-- 
  - Author(s): waffie
  - Date: 2020-08-21 15:55:35
  - Description:
-->
<head>
<title>项目详情</title>
<%@include file="/resource/template1.jsp"%>
</head>
<body class="pageProjectDetail">
	<div class="left">
		<!-- 项目信息汇总 -->
		<div class="panel project-info">
			<div class="panel-head">
				<div class="panel-title" id="projectName">项目信息汇总</div>
			</div>
			<div class="panel-body">
				<div class="tl">
					<div class="chartDiv" id="chartPie"></div>
				</div>
				<ul class="tc">
					<li>
						<div class="title"><i>设计员 登录系统</i></div>
						<div class="line"></div>
						<div class="date">9月3日 9:23</div>
					</li>
					<li>
						<div class="title"><i>设计员 创建 API网关测试任务</i></div>
						<div class="line"></div>
						<div class="date">9月3日 9:23</div>
					</li>
					<li>
						<div class="title"><i>设计员 创建 API网关测试任务</i></div>
						<div class="line"></div>
						<div class="date">9月3日 9:23</div>
					</li>
					<li>
						<div class="title"><i>设计员 创建 API网关测试任务</i></div>
						<div class="line"></div>
						<div class="date">9月3日 9:23</div>
					</li>
					<li>
						<div class="title"><i>设计员 创建 API网关测试任务</i></div>
						<div class="line"></div>
						<div class="date">9月3日 9:23</div>
					</li>
				</ul>
				<ul class="tr">
					<div class="amount"><i>60</i>%</div>
					<div class="title">已完成</div>
				</ul>
			</div>
		</div>
		<!-- tabs-list -->
		<div class="panel panel-tabs" style="margin-top:15px;" id="panelTabs">
			<ul class="tabs">
				<li class="tab">tab1</li>
				<li class="tab">tab2</li>
				<li class="tab">tab3</li>
			</ul>
			<div class="panel-body" style="padding:0 10px 10px;height:395px;">
		        <div id="datagrid" class="nui-datagrid" style="width:100%;height:100%;" 
		            url="../data/data_grid.txt" idField="id" pageSize="10" allowAlternating="true" showPageSize="false">
		            <div property="columns">
						<div type="indexcolumn" width="30" headerAlign="center">序号</div>
		                <div field="c1" width="200" headerAlign="center">待办内容</div>
		                <div field="c2" width="100" headerAlign="center" align="center">业务类型</div>
		                <div field="c3" width="60" headerAlign="center" align="center">送审人</div>
		                <div field="c4" width="60" headerAlign="center" align="center">退回人</div>
		                <div field="c5" width="80" headerAlign="center" align="center">送审时间</div>
		                <div field="c6" width="60" headerAlign="center" align="center">发起人</div>
		                <div field="c7" width="80" headerAlign="center">发起单位</div>
		            </div>
		        </div> 
			</div>
			<div class="panel-body" style="padding:0 10px 10px;height:395px;">
		        <div id="datagrid1" class="nui-datagrid" style="width:100%;height:100%;" 
		            url="../data/data_grid.txt" idField="id" pageSize="10" allowAlternating="true" showPageSize="false">
		            <div property="columns">
						<div type="indexcolumn" width="30" headerAlign="center">tab2</div>
		                <div field="c1" width="200" headerAlign="center">待办内容</div>
		                <div field="c2" width="100" headerAlign="center" align="center">业务类型</div>
		                <div field="c3" width="60" headerAlign="center" align="center">送审人</div>
		                <div field="c4" width="60" headerAlign="center" align="center">退回人</div>
		                <div field="c5" width="80" headerAlign="center" align="center">送审时间</div>
		                <div field="c6" width="60" headerAlign="center" align="center">发起人</div>
		                <div field="c7" width="80" headerAlign="center">发起单位</div>
		            </div>
		        </div> 
			</div>
			<div class="panel-body" style="padding:0 10px 10px;height:395px;">
		        <div id="datagrid2" class="nui-datagrid" style="width:100%;height:100%;" 
		            url="../data/data_grid.txt" idField="id" pageSize="10" allowAlternating="true" showPageSize="false">
		            <div property="columns">
						<div type="indexcolumn" width="30" headerAlign="center">tab3</div>
		                <div field="c1" width="200" headerAlign="center">待办内容</div>
		                <div field="c2" width="100" headerAlign="center" align="center">业务类型</div>
		                <div field="c3" width="60" headerAlign="center" align="center">送审人</div>
		                <div field="c4" width="60" headerAlign="center" align="center">退回人</div>
		                <div field="c5" width="80" headerAlign="center" align="center">送审时间</div>
		                <div field="c6" width="60" headerAlign="center" align="center">发起人</div>
		                <div field="c7" width="80" headerAlign="center">发起单位</div>
		            </div>
		        </div> 
			</div>
		</div>
	</div>
	<div class="right">
		<div class="panel">
			<div class="panel-head">
				<div class="panel-title">最新动态</div>
			</div>
			<div class="panel-body" style="height:665px; overflow-y:auto;">
				<ul class="timeline">
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>创建  API网关测试任务</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>开始  API网关测试任务</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>创建  API网关测试任务</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
					<li class="rs"><span class="tag">8月19日 14:39</span><span class="text">设计员 <i>登录系统</i></span></li>
				</ul>
			</div>
		</div>
	</div>
<script type="text/javascript">
nui.parse();

var theme = 'default';

// 页面加载完成后执行
$(function(){
	// 获取项目id
	var projectId = decodeURI(decodeURI(getQueryString("projectId")));
	// 获取项目名称
	var projectName = decodeURI(decodeURI(getQueryString("projectName")));
	// 设置项目名称
	if (projectName) $("#projectName").text(projectName);
	
	// 饼图
	echartByCustom('chartPie',{
		chartType: 'pie',
	    series: [{
	        name: '系列',
            type: 'pie',
            radius: '50%',
            center: ['40%', '50%'],
            minAngle: 10, 
	        data: [
	        	{ name:'M1', value: 3 },
	        	{ name:'M2', value: 2 },
	        	{ name:'M3', value: 5 },
	        	{ name:'M4', value: 1 }
	        ]
	    }],
	    tooltipTrigger: 'item',
	    tooltipFormatter: '{a} <br/>{b} : {c} ({d}%)'
	});
	
	// tabs
	customPanelTabs("#panelTabs", function(index){
		if (index == 0) nui.get("datagrid").load();
		else if (index == 1) nui.get("datagrid1").load();
		else if (index == 2) nui.get("datagrid2").load();
	});
});
</script>
<script type="text/javascript" src="../../resource/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../../resource/echarts/echarts.custom.js"></script>
</body>
</html>